<template>
	<view class="temp">
		<u-gap height="4" bgColor="#F5F5F5"></u-gap>
		<view class="content1">
			<view class="title">工作信息</view>
			<view class="radioCon">
				<u-radio-group activeColor='#44D4A8' v-model="radiovalue" placement="row">
					<u-radio v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.name"
						@change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>
			<u--form class="formContent" labelPosition="left" :model="model" :rules="rules" ref="uForm">
				<u-form-item labelWidth='100' label="职称" borderBottom prop="formData.professional" borderBottom ref="name">
					<u--input v-model="model.formData.professional" border="none" placeholder="请输入职称"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item labelWidth='100' label="工作单位" borderBottom prop="formData.employer" borderBottom ref="phone">
					<u--input v-model="model.formData.employer" border="none" placeholder="请输入工作单位"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item labelWidth='100' label="执业范围" borderBottom prop="formData.practice" borderBottom ref="region">
					<u--input v-model="model.formData.practice" border="none" placeholder="请输入执业范围"></u--input>
				</u-form-item>
				<u-form-item labelWidth='100' label="工作年限" prop="formData.years" ref="address">
					<u--input v-model="model.formData.years" border="none" placeholder="请输入工作年限"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<u-gap height="4" bgColor="#F5F5F5"></u-gap>
		<view class="content2">
			<view class="title">基本信息</view>
			<u--form class="formContent" labelPosition="left" :model="model" :rules="rules" ref="uForm">
				<u-form-item labelWidth='100' label="姓名" borderBottom prop="formData.name"  ref="name">
					<u--input v-model="recordData.name" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item labelWidth='100' label="手机号" borderBottom prop="formData.phone"  ref="phone">
					<u--input v-model="recordData.phone" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item labelWidth='100' label="身份证号" borderBottom prop="formData.region"  ref="region">
					<u--input v-model="recordData.idCard" border="none" placeholder="请选择地区"></u--input>
				</u-form-item>
				<u-form-item labelWidth='100' label="详细地址" prop="formData.address" ref="address">
					<u--input v-model="recordData.address" border="none" placeholder="请输入详细地址"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="commonBtn">
			<view class="btnCon" @tap="goto('pages/medical/personalVerification')">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue: '医师',
				radiolist: [{
						name: '医师',
					},
					{
						name: '康复治疗师',
					},
					{
						name: '护士',
					}, {
						name: '其它',
					}
				],
				model: {
					formData: {
						professional:"",
						employer:"",
						practice:"",
						years:"",
					},
				},
				recordData: {
					name: "张三13525232333",
					idCard: "13525232333",
					region: "530522198802151023",
					address: "东莞市南城街道天安数码城A栋1001",
				},
				rules: {

				},
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.temp {
		position: relative;

		.title {
			height: 96rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			letter-spacing: 0rpx;
			line-height: 40rpx;
			color: rgba(54, 68, 79, 1);
		}

		.content1 {
			font-size: 28rpx !important;
			padding: 0 24rpx;
			background-color: #fff;

			.radioCon {
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.content2 {
			padding: 0 24rpx;
			background-color: #fff;
		}
	}

	::v-deep .u-radio-group--row {
		justify-content: space-between;
	}

	::v-deep .u-radio {
		flex: auto;
	}
</style>